<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>网站介绍</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;

  }
  .shell{

    height: 100vh;
    /*overflow-x: hidden;*/
    perspective: 3px;
  }
  .shell div{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1226px;

    letter-spacing: 2px;
  }
  .image{
    transform: translateZ(-1px) scale(1.6);
    background-size: cover;
    height: 100vh;
    width: 1226px;
    z-index: -1;
  }
  .text{
    height: 50vh;
    background-color: #fff;
    width: 1226px;
  }
  .text h1{
    color: #000;
  }
  .heading{
    z-index: -1;
    transform: translateY(-30vh) translateZ(1px);
    color: #fff;
    font-size: 30px;
  }
</style>

<body>
<div class="shell">
  <div class="image" style="background-image: url('img/网站介绍1.png');"></div>
  <div class="heading">
    <h10>对于许多80、90后的朋友来说，童年的小卖部应该算是一个美好的回忆，每当放学之时，只要口袋里面有三五毛钱，都会奔向自己村庄里面的小卖部，美美的消费一波。随着社会的发展和进步，小卖部渐渐被超市所代替，尽管现在超市里面的商品满目琳琅，但总感觉没有小卖部里面的东西买的自在，感觉少点什么，也许是我们长大了吧，小卖部已经成为了永久的回忆

    </h10>
  </div>
  <div class="text">
    <h1>Set goals in your mind</h1>
  </div>

  <div class="image" style="background-image: url('img/网站介绍2.png');"></div>
  <div class="heading">
    <h1>When you're down</h1>
  </div>
  <div class="text">
    <h1>Try to wake up the beast in your heart</h1>
  </div>


</div>
</body>

</html>